<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript</title>
</head>
<body>
    <p>当前时间为：<span id="clock"></span></p>

    <button onclick="stopClock(this);">停止</button><hr>

    <button onclick="delayedAlert(this);">2秒后弹出一个提示框</button>
    <button onclick="clearAlert(this);">取消</button>
    <script type="text/javascript">
        var intervalID;

        // 展示时间
        function showTime(){
            var d = new Date();
            document.getElementById("clock").innerHTML = d.toLocaleTimeString();
        }
        function stopClock(e){
            // 清除循环定时器
            clearInterval(intervalID);
            e.setAttribute('disabled', true);   // 实现点击效果
        }
        // 循环定时器，每隔一秒，调用一下，展示时间函数
        intervalID = setInterval(showTime, 1000);

        var timeoutID;
        var that;
        function delayedAlert(e){
            that = e;
            timeoutID = setTimeout(showAlert, 2000);
            e.setAttribute('disabled',true);
        }
        function showAlert(){
            alert('这是一个提示框。');
            that.removeAttribute('disabled');
        }
        function clearAlert(){
            // 清除单次定时器
            clearTimeout(timeoutID);
            that.removeAttribute('disabled');
        }
    </script>

</body>
</html>